<template>
  <el-container class="container-wrap">
    <el-header>
      <div class="logo" :class="isCollapse ? 'el-aside-reduce' : ''">
        <!--跑腿后台-->
        <img :src="userInfo.logo" class="logo-img" alt="">
      </div>
      <div class="nav-bar">
        <div class="switch-btn" @click="changeMenu()">
          <i class="fa fa-bars" title="菜单"></i>
        </div>

        <div class="switch-btn pull-right" @click="openPageConfigView()">
          <i class="fa fa-cogs" title="配置"></i>
        </div>

        <div class="user-group">
          <img :src="userInfo.logo" class="user-face" alt="">
          <p class="user-name">{{userInfo.name}}</p>

          <!--<div class="user-info-group">
            <div class="user-info">
              <img src="../assets/logo.jpg" class="user-face" alt="">
              <p class="user-info-text user-info-name">{{userInfo.name}}</p>
              <p class="user-info-text">2018-07-08 16:06:37</p>
            </div>
            <el-row class="user-info-btn-group">
              <router-link to="/UserProfile">
                <el-button icon="fa fa-fw fa-user" type="primary" size="small">个人设置</el-button>
              </router-link>
              <router-link class="pull-right" to="">
                <el-button icon="fa fa-fw fa-sign-out" type="danger" size="small">注销</el-button>
              </router-link>
            </el-row>
          </div>-->
        </div>

        <div class="switch-btn pull-right">
          <i class="fa fa-recycle" title="刷新缓存" @click="cleanLocalStorage"></i>
        </div>


        <div class="switch-btn pull-right" @click="systemUpdatesDialogVisible = true">

          <i class="fa fa-refresh" title="系统更新">
            <el-badge value="new" v-if="systemUpgradeData.length > 0"></el-badge>
          </i>

        </div>

        <!-- 系统更新弹窗 -->
        <el-dialog
          title="系统更新"
          :visible.sync="systemUpdatesDialogVisible"
          width="30%"
          center>
          <div class="el-dialog-content">
            <p v-if="systemUpgradeData.length == 0">暂无更新</p>
            <p v-for="upgradeLogItem in systemUpgradeData" v-else>{{upgradeLogItem}}</p>
            <!--<h4 v-if="systemUpgradeData.file.length > 0">文件更新</h4>-->
            <!--<div v-for="fileItem in systemUpgradeData.file">-->
            <!--<el-tag>{{fileItem.status == 'modify' ? '修改' : '添加'}}</el-tag>-->
            <!--<div>{{fileItem.file}}</div>-->
            <!--</div>-->
            <!--<h4 v-if="systemUpgradeData.db.length > 0">数据库更新</h4>-->
            <!--<div v-for="dbItem in systemUpgradeData.db">-->
            <!--<el-tag>{{dbItem.status == 'modify' ? '修改' : '添加'}}</el-tag>-->
            <!--<div>{{dbItem.db}}</div>-->
            <!--</div>-->
          </div>
          <div slot="footer" class="dialog-footer systemUpdatesDialog">
            <el-button type="primary" @click="fileUpdates">文件更新</el-button>
            <el-button type="danger" @click="dbUpdates">数据库更新</el-button>
            <el-button @click="systemUpdatesDialogVisible = false">关闭更新面板</el-button>
          </div>
        </el-dialog>
      </div>
    </el-header>
    <el-container>
      <el-aside :class="isCollapse ? 'el-aside-reduce' : ''" style="background-color:#20222A;">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#20222A"
          text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/">
            <el-menu-item index="1">
              <i class="fa fa-tachometer fa-fw"></i>
              <span slot="title">控制台</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="2">
            <template slot="title">
              <i class="fa fa-th fa-fw"></i>
              <span slot="title">小程序装修</span>
            </template>
            <el-menu-item-group>
              <span slot="title">小程序装修</span>
              <router-link to="/WechatAppConfig/IndexTempletManage">
                <el-menu-item index="2-1">小程序首页设置</el-menu-item>
              </router-link>
              <router-link to="/WechatAppConfig/OrderTempletManage">
                <el-menu-item index="2-2">小程序下单设置</el-menu-item>
              </router-link>
              <router-link to="/WechatAppConfig/UserCenterManage">
                <el-menu-item index="2-3">小程序用户中心设置</el-menu-item>
              </router-link>
              <router-link to="/WechatAppConfig/NavManage">
                <el-menu-item index="2-4">小程序导航设置</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="fa fa-cog fa-fw"></i>
              <span slot="title">基本设置</span>
            </template>
            <el-menu-item-group>
              <span slot="title">基本设置</span>
              <router-link to="/BasicConfig/ProcedureConfig">
                <el-menu-item index="3-1">小程序设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/PaymentConfig">
                <el-menu-item index="3-2">支付设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/ClauseConfig">
                <el-menu-item index="3-3">条款设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/NoticeConfig">
                <el-menu-item index="3-4">公告管理</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/BankConfig">
                <el-menu-item index="3-5">开户行管理</el-menu-item>
              </router-link>
              <!--<router-link to="/BasicConfig/CommercialTenantConfig">
                <el-menu-item index="3-6">商家设置</el-menu-item>
              </router-link>-->
              <router-link to="/BasicConfig/LabelSetting">
                <el-menu-item index="3-6">标签设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/SmsSetting">
                <el-menu-item index="3-7">短信设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/TerritorialRestriction">
                <el-menu-item index="3-8">区域限制</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/WechatConfig">
                <el-menu-item index="3-9">微信公众号设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/TempletMessageConfig">
                <el-menu-item index="3-10">模板消息设置</el-menu-item>
              </router-link>
              <router-link to="/BasicConfig/FileUploadConfig">
                <el-menu-item index="3-11">文件上传设置</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="fa fa-bank fa-fw"></i>
              <span slot="title">任务大厅</span>
            </template>
            <el-menu-item-group>
              <span slot="title">任务大厅</span>
              <router-link to="/AssignmentHall/AssignmentAllot">
                <el-menu-item index="4-1">任务分配</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="fa fa-reorder fa-fw"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">订单管理</span>
              <router-link to="/OrderManagement/OrderTabulation">
                <el-menu-item index="5-1">订单列表</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <!--<el-submenu index="6">
            <template slot="title">
              <i class="fa fa-user-secret fa-fw"></i>
              <span slot="title">代理商</span>
            </template>
            <el-menu-item-group>
              <span slot="title">代理</span>
              <router-link to="/AgentManagement/AgentTabulation">
                <el-menu-item index="6-1">代理列表</el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <span slot="title">配送员</span>
              <router-link to="/AgentManagement/ServicePersonalManagement">
                <el-menu-item index="6-2">配送员管理</el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <span slot="title">财务</span>
              <router-link to="/AgentManagement/AgentDrawMoney">
                <el-menu-item index="6-3">提现申请</el-menu-item>
              </router-link>
              <router-link to="/AgentManagement/AgentTransactionDetail">
                <el-menu-item index="6-4">账户明细</el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <span slot="title">设置</span>
              <router-link to="/AgentManagement/AgentConfig">
                <el-menu-item index="6-5">代理设置</el-menu-item>
              </router-link>
              <router-link to="/AgentManagement/AgentIngress">
                <el-menu-item index="6-6">代理入口</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>-->

          <el-submenu index="7">
            <template slot="title">
              <i class="fa fa-user fa-fw"></i>
              <span slot="title">配送员</span>
            </template>
            <el-menu-item-group>
              <span slot="title">配送员</span>
              <router-link to="/ServicePersonal/ServicePersonalApply">
                <el-menu-item index="7-1">配送员申请</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/ServicePersonalTabulation">
                <el-menu-item index="7-2">配送员列表</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/ServicePersonalTransactionDetail">
                <el-menu-item index="7-3">交易明细</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/ServicePersonalGrade">
                <el-menu-item index="7-4">配送员评价</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/ServiceDrawMoney">
                <el-menu-item index="7-5">配送员提现申请</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/AuthorizationService">
                <el-menu-item index="7-7">授权服务</el-menu-item>
              </router-link>
              <router-link to="/ServicePersonal/ServiceRefundPromiseMoney">
                <el-menu-item index="7-8">配送员保证金退款</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title">
              <i class="fa fa-users fa-fw"></i>
              <span slot="title">会员用户</span>
            </template>
            <el-menu-item-group>
              <span slot="title">会员权益</span>
              <router-link to="/ConsumerManagement/AssociatorGrade">
                <el-menu-item index="8-1">会员等级设置</el-menu-item>
              </router-link>
              <router-link to="/ConsumerManagement/GrowthValueConfig">
                <el-menu-item index="8-2">会员成长值设置</el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <span slot="title">用户</span>
              <router-link to="/ConsumerManagement/ConsumerTabulation">
                <el-menu-item index="8-3">用户列表</el-menu-item>
              </router-link>
              <router-link to="/ConsumerManagement/ConsumerDrawMoney">
                <el-menu-item index="8-4">提现申请</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <i class="fa fa-sitemap fa-fw"></i>
              <span slot="title">模块管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">模块管理</span>
              <router-link to="/ModuleManagement/AutoModuleDock">
                <el-menu-item index="9-1">智能对接</el-menu-item>
              </router-link>

              <router-link to="/ModuleManagement/ModuleList">
                <el-menu-item index="9-2">模块申请</el-menu-item>
              </router-link>
              <!--<router-link to="/ModuleManagement/ModuleAuditing">
                <el-menu-item index="9-1">模块审核</el-menu-item>
              </router-link>-->
              <!--<router-link to="">-->
              <!--<el-menu-item index="9-2">对接模块</el-menu-item>-->
              <!--</router-link>-->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="10">
            <template slot="title">
              <i class="fa fa-handshake-o fa-fw"></i>
              <span slot="title">售后服务</span>
            </template>
            <el-menu-item-group>
              <span slot="title">售后服务</span>
              <router-link to="/AfterService/FeedbackTabulation">
                <el-menu-item index="10-1">意见反馈列表</el-menu-item>
              </router-link>
              <!--<router-link to="">-->
              <!--<el-menu-item index="10-2">用户评价</el-menu-item>-->
              <!--</router-link>-->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="11">
            <template slot="title">
              <i class="fa fa-gift fa-fw"></i>
              <span slot="title">营销管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">营销管理</span>
              <router-link to="/MarketingManagement/CouponTabulation">
                <el-menu-item index="11-1">优惠券</el-menu-item>
              </router-link>
              <router-link to="/MarketingManagement/FullSubtractionTabulation">
                <el-menu-item index="11-2">满减奖励</el-menu-item>
              </router-link>
              <router-link to="/MarketingManagement/ReceivingOrderRewardTabulation">
                <el-menu-item index="11-3">接单奖励</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="12">
            <template slot="title">
              <i class="fa fa-tasks fa-fw"></i>
              <span slot="title">平台设置</span>
            </template>
            <el-menu-item-group>
              <span slot="title">平台设置</span>
              <router-link to="/PlatformConfig/CashDepositGradeManagement">
                <el-menu-item index="12-1">配送员保证金设置</el-menu-item>
              </router-link>
              <router-link to="/PlatformConfig/PlatformPriceModelConfig">
                <el-menu-item index="12-2">平台计费设置</el-menu-item>
              </router-link>
              <!--<router-link to="/PlatformConfig/DistanceFreightTempletManagement">
                <el-menu-item index="12-3">距离运费模板管理</el-menu-item>
              </router-link>
              <router-link to="/PlatformConfig/WeightFreightTempletManagement">
                <el-menu-item index="12-4">重量运费模板管理</el-menu-item>
              </router-link>
              <router-link to="/PlatformConfig/FellInFreightTempletManagement">
                <el-menu-item index="12-5">排队金额模板管理</el-menu-item>
              </router-link>
              <router-link to="/PlatformConfig/TimedFreightTempletManagement">
                <el-menu-item index="12-6">时间计费模板管理</el-menu-item>
              </router-link>-->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="13">
            <template slot="title">
              <i class="fa fa-sliders fa-fw"></i>
              <span slot="title">系统设置</span>
            </template>
            <el-menu-item-group>
              <span slot="title">系统设置</span>
              <router-link to="/SystemConfig/SystemInfo">
                <el-menu-item index="13-1">系统信息</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>

          <!--<el-submenu>
            <template slot="title">
              <i class="fa fa-rocket fa-fw"></i>
              <span slot="title">插件管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">插件管理</span>
              <router-link to="/PluginManage/AllPlugin">
                <el-menu-item index="14-1">全部插件</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>-->

        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="main">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: breadcrumbItem.path }" v-for="breadcrumbItem in breadcrumb">
              {{breadcrumbItem.meta.breadcrumbName}}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view/>
          <el-aside class="main-aside" :class="!pageConfig ? 'main-aside-hide' : ''">
            <div class="aside-module-group">
              <h3 class="aside-module-title">皮肤</h3>
              <div class="aside-module-main">
                <div class="skin-group">
                  <div class="skin-head" style="background: #18BC9C;">
                    <div class="skin-logo" style="background: #15A589;"></div>
                  </div>
                  <div class="skin-body">
                    <div class="skin-side" style="background: #545C64;"></div>
                  </div>
                </div>

                <div class="skin-group">
                  <div class="skin-head" style="background: #18BC9C;">
                    <div class="skin-logo" style="background: #15A589;"></div>
                  </div>
                  <div class="skin-body">
                    <div class="skin-side" style="background: #545C64;"></div>
                  </div>
                </div>

                <div class="skin-group">
                  <div class="skin-head" style="background: #18BC9C;">
                    <div class="skin-logo" style="background: #15A589;"></div>
                  </div>
                  <div class="skin-body">
                    <div class="skin-side" style="background: #545C64;"></div>
                  </div>
                </div>

                <div class="skin-group">
                  <div class="skin-head" style="background: #18BC9C;">
                    <div class="skin-logo" style="background: #15A589;"></div>
                  </div>
                  <div class="skin-body">
                    <div class="skin-side" style="background: #545C64;"></div>
                  </div>
                </div>

                <div class="skin-group">
                  <div class="skin-head" style="background: #18BC9C;">
                    <div class="skin-logo" style="background: #15A589;"></div>
                  </div>
                  <div class="skin-body">
                    <div class="skin-side" style="background: #545C64;"></div>
                  </div>
                </div>

              </div>
            </div>
          </el-aside>
        </el-main>
        <el-footer>
          版权信息
        </el-footer>

      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      this.getBreadcrumb();
      let _this = this;

      // 用户信息
      if (!_this.db.get(_this.constant.USER_INFO)) {
        this.api.getUserInfo().then(function (res) {
          if (res.code == 1) {
            _this.db.set(_this.constant.USER_INFO, res.data);
            _this.userInfo = res.data;
          }
        }).catch(function (res) {
          throw new Error(error);
        });
      } else {
        _this.userInfo = _this.db.get(_this.constant.USER_INFO);
      }


      // 更新信息
      this.getSystemUpgradeSynchronousInfo();
    },
    data() {
      return {
        isCollapse: false,
        pageConfig: false,
        userInfo: {},
        systemUpdatesDialogVisible: false, // 系统更新弹窗
        systemUpgradeData: [  // 更新文件日志
        ]
      }
    },
    methods: {
      /**
       * 获取更新信息
       * */
      getSystemUpgradeSynchronousInfo: function () {
        let _this = this;
        this.api.getSystemUpgradeSynchronousInfo().then(function (res) {
          _this.systemUpgradeData = res.data;
        }).catch(function (res) {
          throw new Error(error);
        });
      },
      changeMenu: function () {
        this.isCollapse = !this.isCollapse
      },
      openPageConfigView: function () {
        this.pageConfig = !this.pageConfig
      },
      getBreadcrumb() {
        this.breadcrumb = this.$route.matched;
        this.$route.matched.forEach((item, index) => {
          item.meta.breadcrumbName === '首页' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.breadcrumbName : '';
        })
      },
      /**
       * 清空缓存
       * */
      cleanLocalStorage: function () {
        let _this = this;
        _this.db.clean();
        _this.$message({
          showClose: true,
          message: '缓存清理成功',
          type: 'success'
        });
        _this.location.reload();
      },
      /**
       * 文件更新
       */
      fileUpdates: function () {
        let _this = this;
        this.api.systemUpgradesFile().then(function (res) {
          if (res.code == 1) {
            _this.getSystemUpgradeSynchronousInfo();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(error);
        });
      },
      /**
       * 数据库更新
       */
      dbUpdates: function () {
        let _this = this;
        this.api.systemUpgradesDB().then(function (res) {
          if (res.code == 1) {
            _this.getSystemUpgradeSynchronousInfo();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(error);
        });
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .container-wrap {
    height: 100vh;
  }

  .pull-right {
    float: right !important;
  }

  ::-webkit-scrollbar {
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
  }

  /* 头部 */
  .el-header {
    padding: 0;
    background: #18BC9C;
    display: flex;
  }

  .logo {
    height: 100%;
    width: 200px;
    text-align: center;
    line-height: 60px;
    color: #FFF;
    font-size: 20px;
    float: left;
    background: #15A589;
  }

  .logo-img {
    height: 50px;
    display: block;
    margin: 5px auto;
  }

  /* 用户栏 */
  .nav-bar {
    width: max-content;
    flex: 1;
    height: 100%;
  }

  /* 菜单切换按钮 */
  .switch-btn {
    width: 60px;
    height: 100%;
    line-height: 60px;
    text-align: center;
    color: #ffffff;
    float: left;
  }

  .switch-btn:hover {
    background: #15A589;
  }

  .switch-btn .el-badge {
    position: absolute;
    top: 10px;
  }

  /* 用户中心 */
  .user-group {
    float: right;
    margin: 0 30px 0 15px;
    position: relative;
  }

  .user-face {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin: 15px;
    background: #ffffff;
    float: left;
    border: 2px solid #FFFFFF;
  }

  .user-name {
    margin: 0;
    padding: 0;
    line-height: 60px;
    color: #ffffff;
    font-size: 14px;
    float: left;
  }

  .user-group:hover .user-info-group {
    display: block;
  }

  /* 用户工具 */
  .user-info-group {
    position: absolute;
    right: 0;
    top: 60px;
    width: 300px;
    height: 200px;
    background: #F1F4F6;
    z-index: 9999;
    border-top: 1px solid #FFFFFF;
    display: none;
    box-shadow: 0 1px 3px #666;
  }

  .user-info {
    height: 150px;
    background: #18BC9C;
    overflow: hidden;
  }

  .user-info .user-face {
    display: block;
    margin: 15px auto;
    float: none;
    width: 60px;
    height: 60px;
    border-radius: 60px;
  }

  .user-info .user-info-text {
    width: 100%;
    display: block;
    text-align: center;
    color: #fbfbfb;
    font-size: 12px;
    margin: 8px 0;
  }

  .user-info .user-info-name {
    font-size: 14px;
    font-weight: bold;
  }

  .user-info-btn-group {
    height: 49px;
    width: 100%;
    padding: 0 10px;
  }

  .user-info-btn-group .el-button {
    padding: 8px 15px;
    margin: 10px 0;
  }

  /* 系统更新弹窗 */
  .systemUpdatesDialog .el-button {
    padding: 10px 15px;
  }

  .el-dialog-content {
    height: 400px;
    overflow: auto;
  }

  .el-dialog-content > div {
    margin-bottom: 15px;
    display: flex;
  }

  .el-dialog-content h4 {
    margin-bottom: 15px;
  }

  .el-dialog-content .el-tag {
    margin-right: 15px;
    padding: 0 15px;
  }

  /* 侧边栏 */
  .el-aside {
    width: 200px !important;
    border-right: 1px solid #eee;
  }

  .el-aside-reduce {
    width: 56px !important;
  }

  .el-aside i {
    margin-right: 10px;
  }

  .el-menu {
    border: none;
    margin-bottom: 30px;
  }

  .el-menu-item-group, .el-menu-item-group .el-menu-item {
    background: #343434 !important;
    color: #ffffff !important;
    font-size: 12px;
    text-indent: 10px;
  }

  .el-menu-item-group span {
    background: #343434 !important;
    color: #cbcbcb !important;
    font-size: 12px;
    text-indent: 10px;
  }

  .el-menu .is-active {
    background: #009688 !important;
    color: #ffffff !important;
  }

  a {
    text-decoration: none !important;
  }

  /* 主要功能 */
  .main {
    position: relative;
  }

  /* 配置区域 */
  .main-aside {
    height: 100%;
    position: fixed;
    right: 0;
    top: 60px;
    background: #545c64;
    width: 250px !important;
    overflow: hidden;
    transition: all .3s ease 0s;
    color: #FFF;
    z-index: 9999;
  }

  .main-aside-hide {
    width: 0 !important;
  }

  /* 内容模块 */
  .aside-module-group {
    width: 100%;
  }

  .aside-module-title {
    font-size: 18px;
    margin: 15px;
  }

  .aside-module-main {
    margin: 0 15px;
    overflow: hidden;
  }

  /* 皮肤 */
  .skin-group {
    width: 60px;
    height: 40px;
    margin: 5px 6px;
    float: left;
  }

  .skin-head {
    width: 100%;
    height: 10px;
  }

  .skin-logo {
    height: 10px;
    width: 15px;
  }

  .skin-body {
    height: 30px;
    width: 100%;
    background: #FFF;
  }

  .skin-side {
    height: 30px;
    width: 15px;
  }

  .el-breadcrumb {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
  }

  /* 尾部 */
  .el-footer {
    text-align: center;
    height: 40px !important;
    line-height: 40px;
    color: #666;
    font-size: 12px;
    border-top: 1px solid #eee;
  }


</style>
